<template>
  <div>
    <div v-if="listItem?._id">
      <div class="header">
        <div class="left" @click.stop="$router.go(-1)">
          <img src="@/../public/images/1671779704879.png" alt="" />
        </div>
        <div class="middle">职位详情</div>
        <div class="right" @click.stop="collectHandler(!isCollected ? 0 : 1)">
          <img
            v-if="!isCollected"
            src="@/../public/images/1671779524668.png"
            alt=""
          />
          <img v-else src="@/../public/images/1671896109618.png" alt="" />
        </div>
      </div>
      <div class="box-job">
        <JobComponent :listItem="listItem" :isJobDetail="true" />
      </div>
      <div class="job-content">
        <div class="title">职位详情</div>
        <div class="responsibility">
          <div>岗位职责:</div>
          <div
            class="text"
            v-for="(description, index) in listItem.description.slice(0, slice)"
            :key="index"
          >
            {{ description.title }}
          </div>
          <div
            @click.stop="showAll"
            v-if="!(slice == listItem?.description?.length)"
          >
            ... <span class="color">查看全部</span>
          </div>
        </div>
        <div class="title">任职资格</div>
        <div class="responsibility">
          <div
            class="text"
            v-for="(work, index) in listItem.works"
            :key="index"
          >
            {{ work.title }}
          </div>
        </div>
      </div>
      <div class="btn" @click="toDeliverHandler">
        <van-button
          type="primary"
          size="large"
          color="#149639"
          @click="toChatHandler"
          >立即投递</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import JobComponent from "@/components/JobComponent.vue";
import { mapState } from "vuex";
import qs from "qs";
export default {
  name: "JobsView",
  components: {
    JobComponent,
  },
  data: () => {
    return {
      listItem: {},
      slice: 2,
      isCollected: false,
      msg: "",
    };
  },
  computed: {
    ...mapState(["user", "jobCollection"]),
  },
  watch: {
    jobCollection(list) {
      this.isCollected = list.some((item) => this.listItem._id == item._id);
    },
  },
  methods: {
    //立即投递
    toChatHandler() {
      localStorage.setItem("listItem", JSON.stringify(this.listItem));
      this.$router.push("/chat");
    },
    //收藏
    collectHandler(type) {
      this.axios({
        method: "post",
        url:
          type == 0
            ? "/v1/company/company-work-fav-add"
            : "/v1/company/company-work-fav-remove",
        data: qs.stringify({
          workid: this.listItem._id,
        }),
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      }).then((res) => {
        console.log(res);
        this.msg = res.data.message;
        this.axios({
          method: "post",
          url: "/v1/company/company-work-fav-list",
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        }).then((res) => {
          console.log(res, "swws");
          if (res.data.statusCode == 200) {
            this.$toast(this.msg);
            this.$store.commit("setJobCollection", {
              jobCollection: res.data.data.result,
            });
          } else this.$toast("获取信息失败");
        });
      });
    },
    //立即投递
    toDeliverHandler() {
      if (!this.user?._id) {
        this.$router.push("/login");
      }
    },
    //展开全部岗位详情
    showAll() {
      this.slice = this.listItem?.description.length;
    },
    //获取岗位详情
    getJobDetail() {
      this.axios
        .get("/v1/company/work-info" + "?workid=" + this.$route.query.id)
        .then((res) => {
          if (res?.data?.statusCode == 200) {
            this.listItem = res.data.data;
            this.isCollected = this.jobCollection.some(
              (item) => this.listItem._id == item._id
            );
          }
        });
    },
  },
  created() {
    this.getJobDetail();
  },
};
</script>

<style lang="scss" scoped>
.color {
  color: #149639;
}
.header {
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  height: 1rem;
  background-color: #149639;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.36rem;
  color: #fff;
  box-sizing: border-box;
  padding: 0 0.3rem;

  .left {
    width: 0.15rem;
    height: 0.28rem;
  }

  .right {
    width: 0.4rem;
    height: 0.4rem;
  }
}

.box-job {
  width: 6.9rem;
  background: #ffffff;
  box-shadow: 0px 0.06rem 0.21rem 0px rgba(1, 64, 153, 0.22);
  border-radius: 0.2rem;
  margin: 0.3rem auto;
}

.job-content {
  box-sizing: border-box;
  padding: 0 0.3rem;
  margin-top: 0.1rem;

  .title {
    text-align: start;
    font-size: 0.3rem;
    color: #333333;
    font-weight: bold;
  }

  .responsibility {
    margin: 0.4rem 0 0.9rem 0;
    text-align: start;
    width: 6.95rem;
    font-size: 0.24rem;
    font-weight: 300;
    color: #333333;
    .text {
      margin: 0.2rem 0;
    }
  }
}
.btn {
  position: sticky;
  left: 0;
  bottom: 0;
}
</style>